/* HistoryRecordPage.css */

.history-record-page {
    padding: 20px; /* 页面内边距 */
    background-color: #f0f2f5; /* 浅灰色背景，可根据需要调整 */
    min-height: 100vh; /* 保证页面至少占满视口高度 */
}

.page-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.search-area {
    margin-bottom: 30px; /* 搜索框下方留白 */
}

/* 可以自定义搜索输入框的样式 */
/* .search-input .ant-input-search-input {
    // ...
} */

.records-list-area {
    background-color: #fff; /* 列表区域白色背景 */
    padding: 20px; /* 列表区域内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.date-group {
    margin-bottom: 20px; /* 日期分组之间留白 */
}

/* 自定义分割线的样式 */
.date-group .ant-divider-plain {
    font-size: 16px;
    font-weight: bold;
    color: #555;
    margin: 20px 0; /* 分割线上下方留白 */
}

/* 列表项样式 */
.record-item .ant-list-item {
    padding: 10px 0; /* 列表项上下内边距 */
    border-bottom: 1px solid #f0f0f0; /* 列表项之间的分割线 */
    cursor: pointer; /* 鼠标悬停显示手型，表示可点击 */
}

/* 最后一个列表项移除底部边框 */
.record-item:last-child .ant-list-item {
     border-bottom: none;
}


.record-content {
    display: flex; /* 使用 flex 布局 */
    justify-content: space-between; /* 文本和工作区左右对齐 */
    align-items: center; /* 垂直居中 */
    width: 100%;
}

.record-text {
    flex-grow: 1; /* 文本占据剩余空间 */
    margin-right: 15px; /* 文本与工作区之间的间距 */
    color: #333;
    /* 可以添加样式使文本更像链接或按钮 */
    /* text-decoration: underline; */
    /* color: #1890ff; */
}

.workspace-label {
    flex-shrink: 0; /* 工作区标签不收缩 */
    font-size: 0.8em;
    color: #999;
    background-color: #e6f7ff; /* 浅蓝色背景，模拟设计稿右侧标签 */
    padding: 2px 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    white-space: nowrap; /* 防止文字换行 */
}

/* 可以为列表项添加 hover 效果 */
.record-item .ant-list-item:hover {
    background-color: #e6f7ff; /* 鼠标悬停时背景变蓝 */
    transition: background-color 0.3s ease; /* 过渡效果 */
}